<template>
  <div>
    <el-dialog
      width="50%"
      :title="dialogType==1?'新建名片':'编辑名片'"
      :visible.sync="visible"
      append-to-body
      :before-close="close"
    >
      <el-form
        label-width="120px"
        :model="form"
        :rules="rules"
        ref="form"
        class="adjust-form"
        size="small"
        :validate-on-rule-change="false"
      >
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="form.userName" :maxlength="32" placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="form.position" :maxlength="32" placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNumber">
          <el-input v-model="form.mobileNumber" :maxlength="32" placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="form.companyName" :maxlength="32" placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="所属区域" prop="address">
          <el-input v-model="form.address" :maxlength="32" placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <pic-upload
            v-if="visible"
            :action="uploadUrl+'/file/upload?type=02'"
            :url="form.avatar"
            placeholder="上传头像"
            @on-success="avataronSuccess"
          ></pic-upload>

          <!-- <el-button size="small" type="primary" @click="openFile(0)">点击上传</el-button>
          <input class="file" ref="file" type="file" @change="httpRequest" />-->
        </el-form-item>

        <el-form-item label="二维码">
          <pic-upload
            v-if="visible"
            :action="uploadUrl+'/file/upload?type=02'"
            :url="form.qrCode"
            placeholder="上传二维码"
            @on-success="qrCodeonSuccess"
          ></pic-upload>
          <!-- <el-button size="small" type="primary" @click="openFile(1)">点击上传</el-button>
          <input class="file" ref="file" type="file" @change="httpRequest" />-->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" size="small">取 消</el-button>
        <el-button v-loading="loading" size="small" type="primary" @click="onSubmit">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addUser, updateUser, userDetails, uploadFile } from "@/api/common";
import PicUpload from "@/components/upload/picUpload.vue";
export default {
  name: "CreateDialog",
  components: {
    PicUpload
  },
  data() {
    return {

      uploadUrl: `https://mini.qdkcompressor.com/adviser/sys`,

      // 是否显示
      visible: false,
      loading: false,
      uploadType: -1, //0头像 2二维码
      dialogType: 1, // 1新建 2编辑
      userId: "",
      form: {
        userName: "",
        position: "",
        mobileNumber: "",
        companyName: "",
        address: "",
        avatar: "", //头像附件id
        qrCode: "" //二维码附件id
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户姓名", trigger: "blur" }
        ],
        position: [
          { required: true, message: "请输入用户职位", trigger: "blur" }
        ],
        mobileNumber: [
          { required: true, message: "请输入用户手机号码", trigger: "blur" }
        ],
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        address: [{ required: true, message: "请输入地区", trigger: "blur" }],
        avatar: [{ required: true, message: "请上传头像", trigger: "blur" }],
        qrCode: [{ required: true, message: "请上传二维码", trigger: "blur" }]
      }
    };
  },
  computed: {
    // isDisableTime() {
    //   return this.form.effectiveType === 1;
    // }
  },
  mounted() {
    // this.getYear();
    // this.requestFenLei();
  },
  methods: {
    // 上传头像成功
    avataronSuccess(val) {
      // this.isFlag = true;

      this.form.avatar = val;
    },

    // 上传二维码
    qrCodeonSuccess(val) {
      // this.isFlag = true;

      this.form.qrCode = val;
    },
    openFile(type) {
      this.uploadType = type;
      this.$refs.file.click();
    },
    httpRequest(event) {
      const file = event.target.files[0];
      //   创建 FormData 对象
      const formData = new FormData();
      formData.append("file", file);
      let params = { type: "02" };
      uploadFile(formData, params).then(res => {
        this.$refs.file.value = "";
        if (res.code == 200) {
          if (this.uploadType == 0) {
            this.form.avatar = res.data;
          } else {
            this.form.qrCode = res.data;
          }
          this.$message.success("上传成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 上传图片
    beforeUpload(file) {
      console.log(file);
      return true;
    },
    onpen(type, row) {
      // type 1新建名片 2编辑名片
      this.dialogType = type;
      if (this.dialogType == 2) {
        this.userId = row.userId;
        this.getDetails();
        // this.form = row;
      }
      this.visible = true;
    },
    // 关闭对话框
    close() {
      // 清除表单验证
      this.$refs.form.clearValidate();
      this.form.qrCode = "";
      this.form.avatar = "";
      this.$refs.form.resetFields();
      this.visible = false;
    },
    // 保存
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.dialogType == 1) {
            this.onCreate();
          } else if (this.dialogType == 2) {
            this.onUpdate();
          }
        } else {
          this.loading = false;
        }
      });
    },
    // 新建
    onCreate() {
      addUser({
        ...this.form
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("添加用户成功");
          this.loading = false;
          this.$emit("onSuccess", true);
          this.close();
        } else {
          this.loading = false;
          this.$message.error(res.msg);
        }
      });
    },
    // 编辑
    onUpdate() {
      updateUser({
        ...this.form
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑用户成功");
          this.loading = false;
          this.$emit("onSuccess", true);
          this.close();
        } else {
          this.loading = false;
          this.$message.error(res.msg);
        }
      });
    },
    // 获取详情
    getDetails() {
      userDetails({
        id: this.userId
      }).then(res => {
        if (res.code == 200) {
          this.form = res.data;
          console.log(this.form, "form.userName");
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.adjust-form {
  margin-left: -20px;
}
.mrb5 {
  margin: 0px 5px 5px 0px;
}
.container {
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  // margin-top: 20px;
  .message-title {
    cursor: pointer;
  }
  .handle-row {
    margin-top: 30px;
  }
}

.file {
  display: none;
}
</style>

